<template>
  <div v-loading="loading" element-loading-text="加载中。。。">
    <el-card style="overflow:visible;">
      <el-form  :model="form" size="mini" label-position="top" ref="form">
        <el-row :gutter="10">
          <el-col :lg="4" :md="6">
            <el-form-item label='公司' prop='company'>
              <el-select v-model="form.company" placeholder="请选择公司" @change="queryTeam">
                <el-option 
                key="index"
                label="全部"
                value="">
                </el-option>
                <el-option v-for="item in companyList" 
                :key="item.TEAMID"
                :label="(item.TEAMID+'-'+item.TEAMNAME)"
                :value="item.TEAMID">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
           <el-col :md="6" :lg="4">
            <el-form-item label="班组" prop="team">
              <el-select v-model="form.team" filterable placeholder="请选择班组" @change="agentQuery">
                <el-option 
                key="index"
                label="全部"
                value="">
                </el-option>
                <el-option
                  v-for="item in teamList"
                  :key="item.TEAMID"
                  :label="(item.TEAMID+'-'+item.TEAMNAME)"
                  :value="item.TEAMID"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :md="6" :lg="4">
            <el-form-item label="坐席" prop="agent">
              <el-select v-model="form.agent" multiple placeholder="请选择坐席">
                <el-option
                  v-for="item in agentList"
                  :key="item.AGENTID"
                  :label="(item.AGENTID+'-'+item.AGENTNAME)"
                  :value="item.AGENTID"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="2" :md="3"  class="searchBtnMarginTop">
            <el-button type="primary" icon="el-icon-search" :loading="loading" size="mini" @click="query(1)">查询</el-button>
          </el-col>
          <el-col :md="3" :lg="2" class="searchBtnMarginTop">
            <el-button type='warning' size='mini' icon='el-icon-refresh' @click="clearForm('form')">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card style="margin-top:10px;">
      <el-row :gutter="10">
        <el-col :lg="2" :md="3" v-if="btnPermission('Button_User_Download')">
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-download"
            :disabled="tableData.length==0"
            @click="getExcel"
          >导出</el-button>
        </el-col>
      </el-row>
      <el-table
        :data="tableData"
        ref="table"
        border
        class="tableMarginTop"
        header-row-class-name="tableHeaderClass"
        highlight-current-row
        @selection-change="rowDate">
        <el-table-column type="selection" width="40px"></el-table-column>
        <el-table-column prop="AGENTID" label="坐席工号"></el-table-column>
        <el-table-column prop="AGENTNAME" label="坐席姓名"></el-table-column>
        <el-table-column prop="EXTENSIONNO" label="签入分机"></el-table-column>
        <el-table-column prop="YY_STATUS_CurrentAgentStatus" label="当前状态" :formatter="dataFormat"></el-table-column>
        <el-table-column prop="YY_CurrentAgentStatus_Time" label="当前状态持续时间(s)"></el-table-column>
        <el-table-column prop="loginIntime" label="最后签入时间"></el-table-column>
        <el-table-column prop="avecalltimes" label="人均日话量"></el-table-column>
        <el-table-column prop="YY_TIME_AfterCallWork_AVER" label="整理均长(s)"></el-table-column>
        <el-table-column prop="YY_TIME_AgentLogin" label="值机时长(s)"></el-table-column>
        <el-table-column prop="availability" label="工时利用率"></el-table-column>
        <el-table-column prop="YY_NUM_NotReady" label="示忙次数"></el-table-column>
        <el-table-column prop="YY_TIME_NotReady" label="示忙时长(s)"></el-table-column>
        <el-table-column prop="YY_TIME_AgentReady" label="示闲时长(s)"></el-table-column>
        <el-table-column prop="YY_TIME_CALLS_TOTAL" label="通话时长(s)"></el-table-column>
        <el-table-column prop="YY_TIME_CALLS_AVER" label="通话均长(s)"></el-table-column>
      </el-table>
      <!-- <div style="text-align:right;margin-top:20px;" v-show="this.tableData">
        <el-pagination
          :current-page="currentPage"
          background
          :page-size="pageSize"
          layout="total, prev, pager, next, jumper"
          :total="totalRcrdNum"
          @current-change="changePage"
        ></el-pagination>
      </div> -->
    </el-card>
  </div>
</template>

<script>
import comQuery from "@/message/siteManagement/seatStatusDetail/comQuery";
import query from "@/message/siteManagement/seatStatusDetail/query";
import request1 from "@/common/utils/requestTest";
import request from "@/common/utils/requestYg";
import getGlobalParams from "@/common/utils/getGlobalParams";
import agentQuery from "@/message/siteManagement/seatStatusDetail/agentQuery";

export default {
  name: "",
  components: {},
  data() {
    return {
      pageSize: undefined, //表格每页的条数
      form: {
        //表单数据
        company:"",
        team: "",
        agent: []
      },
      list1: [],
      autoWidth: true,
      filename: "坐席状态详情表",
      bookType: "xlsx",
      agentList: [],
      teamList: [],
      companyList: [],
      currentRow: [], //表格当前选中行
      currentPage: 1, //表格当前页
      totalRcrdNum: 0,
      tableData: [], //表格 数据
      loading: false, //loading遮罩
      "YY_STATUS_CurrentAgentStatus": {
        "0": "0-未监控",
        "1": "1-监控",
        "2": "2-签入",
        "3": "3-挂机",
        "4": "4-就绪",
        "5": "5-摘机",
        "6": "6-拨号",
        "7": "7-振铃",
        "8": "8-示忙",
        "9": "9-话后小结",
        "10": "10-离线模式2",
        "11": "11-小休模式1",
        "12": "12-小休模式2",

        "13": "13-保持",
        "18": "18-未知通话",
        "19": "19-咨询",
        "20": "20-内部通话",
        "21": "21-呼出",
        "22": "22-呼入",
        "23": "23-签出"
      },
    };
  },
  computed: {},
  created: function() {
    this.pageSize = getGlobalParams.get("PageSize");
    // this.query();
    this.comQuery();
  },
   watch: {
  },
  methods: {
    comQuery(){
      //模板配置查询
      let resBody = new comQuery();
      resBody.data.TEAMTYPE = "1";
      request1(resBody)
        .then(response => {
          if (response.SYS_HEAD.ReturnCode === "000000") {
            this.companyList = response.RSP_BODY.RspStruct || [];
          } else {
            this.$message({
              type: "error",
              message: response.SYS_HEAD.ReturnMessage
            });
            this.companyList=[];
          }
          this.loading = false;
        })
        .catch(error => {
          this.loading = false;
        })
    
    },
    //查询坐席
    agentQuery(val){
      this.agentList = [];
      this.form.agent = [];
      let resBody = new agentQuery();
      resBody.data.agentdep = this.form.company;
      resBody.data.agentteam = val;
      request(resBody)
        .then(response => {
          if (response.SYS_HEAD.ReturnCode === "000000") {
            this.agentList = response.RSP_BODY.AgentList || [];
          } else {
            this.$message({
              type: "error",
              message: response.SYS_HEAD.ReturnMessage
            });
            this.agentList=[];
          }
          this.loading = false;
        })
        .catch(error => {
          this.loading = false;
        })
    
    },
    //数据模板ID初始化下拉框
     queryTeam(val){
       if(val === "") {
         this.teamList = [];
         this.agentList = [];
         this.form.agent = [];
         this.form.team = "";
       } else {
         this.teamList = [];
         this.agentList = [];
         this.form.agent = [];
         this.form.team = "";
         let resBody = new comQuery();
         resBody.data.TEAMID = '';
         resBody.data.TEAMNAME = '';
         resBody.data.TEAMLEVEL= '';
         resBody.data.TEAMTYPE = '0';
         resBody.data.HTEAMID = val;
         resBody.data.pageflag = 4;
         resBody.data.pagerownum = 999999;
         resBody.data.currpage = this.currentPage;
         request1(resBody)
           .then(response => {
             if (response.SYS_HEAD.ReturnCode === "000000") {
               this.teamList = response.RSP_BODY.RspStruct || [];
               this.agentQuery("");
             } else {
               this.$message({
                 type: "error",
                 message: response.SYS_HEAD.ReturnMessage
               });
               this.teamList=[];
             }
           })
           .catch(error => {
           })
       }
    },
    query(num){
      this.loading = true;
      this.currentPage = num;
      let resBody = new query();
      let list = "";
      if(this.form.agent != null) {
          for(let i = 0; i < this.form.agent.length; i++) {
            if(i == 0) {
              list ="'" + this.form.agent[i] + "'";
            } else {
              list = list+ "," + "'" + this.form.agent[i] + "'";
            }
          }
          console.log("=============", list);
        }
      resBody.data.company=this.form.company,
      resBody.data.group=this.form.team,
      resBody.data.agentid = list;
      request(resBody)
        .then(response => {
        console.log("返回信息"+response)
          if (response.SYS_HEAD.ReturnCode === "000000") {
            this.tableData = response.RSP_BODY.AgentList || [];
            // this.totalRcrdNum = response.RSP_BODY.TOTALROWNUM;
            // this.query1();
          } else {
            this.$message({
              type: "error",
              message: response.SYS_HEAD.ReturnMessage
            });
            this.tableData=[];
          }
          this.loading = false;
        })
        .catch(error => {
          this.loading = false;
        })
    
    },
    async getExcel() {
      let resBody = new query();
      resBody.data.company="",
      resBody.data.group="",
      resBody.data.agentid = "";
      request(resBody)
      .then(response => {
        if(response.SYS_HEAD.ReturnCode === "000000") {
          this.list1 = response.RSP_BODY.AgentList || [];
          for(let i=0; i<this.list1.length;i++){
            this.list1[i].YY_STATUS_CurrentAgentStatus = this.YY_STATUS_CurrentAgentStatus[this.list1[i].YY_STATUS_CurrentAgentStatus];
           }
          this.handleDownload();
        } else {
          this.$message({
            type: "error",
            message: `${response.SYS_HEAD.ReturnMessage}`
          });
        }
      })
    },
    handleDownload() {
      if (!this.list1.length) {
        this.$message({
          type: 'warning',
          message: '表格无数据'
        })
        return
      }
      import('@/common/utils/Export2Excel').then(excel => {
        const tHeader = ['坐席工号', '坐席姓名', '签入分机', '当前状态', '当前状态持续时间(s)', '签入时间', '人均日话量', '整理均长(s)', '值机时长(s)', '工时利用率', '示忙次数', '示忙时长(s)', '示闲时长(s)', '通话时长(s)', '通话均长(s)'];
        const filterVal = ['AGENTID', 'AGENTNAME', 'EXTENSIONNO','YY_STATUS_CurrentAgentStatus','YY_CurrentAgentStatus_Time','loginIntime', 'avecalltimes', 'YY_TIME_AfterCallWork_AVER', 'YY_TIME_AgentLogin','availability','YY_NUM_NotReady','YY_TIME_NotReady','YY_TIME_AgentReady','YY_TIME_CALLS_TOTAL','YY_TIME_CALLS_AVER'];
        const seatlist = this.list1;
        const data = this.formatJson(filterVal, seatlist);
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: this.filename,
          autoWidth: this.autoWidth,
          bookType: this.bookType
        })
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        if(j === 'timestamp') {
          return parseTime(v[j])
        } else {
          return v[j]
        }
      }))
    },
    dataFormat(row, column){
      if(column.property == "YY_STATUS_CurrentAgentStatus")
        return this.YY_STATUS_CurrentAgentStatus[row[column.property]];
    },
     // 重置查询条件
    clearForm(item) {
      this.$refs["" + item].resetFields();
    },
    changePage(val) {
      // this.currentPage = val;
      this.query(val);
    },
    rowDate(val) {
      this.currentRow = val;
    },
    refreshTable() {
      //刷新数据并清除选中的数据
      this.query(1);
    },
  }
};
</script>


<style lang="scss" scoped>
.selectTree {
  min-width: 150px;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}
.dialog-text {
  display: inline-block;
  width: 100%;
  text-align: center;
  color: red;
}       
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.el-card {
  width: 100%;
}
.el-form-item {
  margin-left: 30px;
}
.el-form-item1 {
  margin-left: 10px;
}
.box2-button {
  width: 80px;
}

.el-card {
  overflow: inherit;
}
</style>
